<template>
  <div class="elem" v-for="item in data.elemlist" :key="item">
    <div class="view">
      <p class="title"><span>视黄醇</span>丙酸脂</p>
      <p class="desc">{{ item.desc }}</p>
      <ul>
        <li>抗衰老</li>
        <li>美白祛斑</li>
        <li>抗氧化剂</li>
      </ul>
    </div>
    <div class="img">
      <img :src="item.img" alt="" />
    </div>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    const data = reactive({
      elemlist: [
        {
          desc: "RETINYL PROPIONATE",
          img: "http://121.40.124.132:3000/images/search/hongdian.png",
        },
        {
          desc: "RETINYL PROPIONATE",
          img: "http://121.40.124.132:3000/images/search/hongdian.png",
        },
        {
          desc: "RETINYL PROPIONATE",
          img: "http://121.40.124.132:3000/images/search/hongdian.png",
        },
        {
          desc: "RETINYL PROPIONATE",
          img: "http://121.40.124.132:3000/images/search/hongdian.png",
        },
        {
          desc: "RETINYL PROPIONATE",
          img: "http://121.40.124.132:3000/images/search/hongdian.png",
        },
        {
          desc: "RETINYL PROPIONATE",
          img: "http://121.40.124.132:3000/images/search/hongdian.png",
        },
        {
          desc: "RETINYL PROPIONATE",
          img: "http://121.40.124.132:3000/images/search/hongdian.png",
        },
        {
          desc: "RETINYL PROPIONATE",
          img: "http://121.40.124.132:3000/images/search/hongdian.png",
        },
      ],
    });
    return {
      data,
    };
  },
};
</script>

<style lang="less" scoped>
.elem {
  padding: 12px 16px 10px;
  border-bottom: 1px solid #eee;
  overflow: hidden;
  .view {
    float: left;
    .title {
      font-size: 14px;
      font-weight: 900;
      line-height: 24px;
      span {
        color: #68dcdc;
      }
    }
    .desc {
      font-size: 1px;
      color: #999;
      line-height: 20px;
    }
    ul {
      display: flex;
      justify-content: space-between;
      width: 210px;
      li {
        display: inline-block;
        padding: 5px 8px;
        border: 1px solid #68dcdc;
        border-radius: 14px;
        color: #68dcdc;
        font-size: 12px;
      }
    }
  }
  .img {
    float: right;
    img {
      margin-top: 28px;
    }
  }
}
</style>
